<template>
  <div id="comp-footer">
    <ul>
      <router-link
        v-for="(item, index) in links"
        :key="index"
        :to="item.route"
        tag="li">
        <a href="#">
          <article class="img"></article>
          <span v-text="item.name"></span>
        </a>
      </router-link>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "comp-footer",
    data() {
      return {
        links: [
          {
            name: "首页",
            route: "/"
          },
          {
            name: "险种",
            route: "/choose"
          },
          {
            name: "资讯",
            route: "/news"
          },
          {
            name: "我的",
            route: "/mine"
          }
        ]
      }
    }
  }
</script>

<style scoped lang="scss">

  $comp-footer-boxShadow: 0 0 4px 2px rgba(0, 0, 0, .1);
  $icon-width: 24px;
  $icon-height: 21px;
  $font-size: 1.1rem;
  $normal-color: #333;
  $active-color: #0196ff;

  #comp-footer {
    position: fixed;
    bottom: 0;
    width: $size-as-parent;
    height: $comp-footer-height;
    box-shadow: $public-box-shadow;
    background: $white;

    >ul {
      width: $size-as-parent;
      height: $size-as-parent;
      display: flex;
      align-items: center;

      >li {
        flex: 1;
        text-align: center;

        &.router-link-exact-active {
          >a {
            >.img {
              background-image: url('../../assets/images/public/footer-active.png');
            }

            >span {
              color: $active-color;
            }
          }
        }

        >a {

          >span {
            color: $normal-color;
            font-size: $font-size;
          }

          >.img {
            width: $icon-width;
            height: $icon-height;
            background: url("../../assets/images/public/footer-normal.png") no-repeat left top / auto $icon-height;
            margin: $margin-auto;
          }
        }

        &:nth-of-type(1) .img {
          background-position: 0 0;
        }
        &:nth-of-type(2) .img {
          background-position: -91px 0;
        }
        &:nth-of-type(3) .img {
          background-position: -183px 0;
        }
        &:nth-of-type(4) .img {
          background-position: -274px 0;
        }
      }
    }
  }
</style>
